<template>
  <div class="shishi-main">
    <div class="shishi-zuo">
      <div class="zuo-value">{{ zuoData.value }}</div>
      <div class="zuo-name">{{ zuoData.name }}</div>
    </div>
    <div class="shishi-you">
      <div class="you-item" v-for="(item,index) in youData" :key="index">
        <div class="you-value">{{ item.value }}</div>
        <div class="you-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '@/api/request.js'
export default {
  name: 'ViewShishiGet18',
  data () {
    return {
      zuoData: {},
      youData: [],
      zongData: []
    }
  },
  mounted() {
    this.getShishi();
  },
  methods: {
    getShishi(){
      request({
        url: '/shishijiance?xzbm='+this.$store.state.provinceId,
        method: 'get'
      }).then(res=>{
        this.zuoData = res.data[0];
        this.youData = res.data[0].youce;
        this.zongData = res.data;
      })
    }
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          // this.zuoData = this.zongData[this.$store.state.provinceId].anquanyujing;
          // this.youData = this.zongData[this.$store.state.provinceId].youce;
          this.getShishi();
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.shishi-main{
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  .shishi-zuo{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .zuo-value{
      font-family: shuziFont;
      font-size: 5rem;
      color: @leftDataColor;
    }
    .zuo-name{
      font-family: siyuanFont;
      font-size: 1.5rem;
      color: @mkColor;
    }
  }
  .shishi-you{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .you-item{
      width: 32%;
      height: 49%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .you-value{
        font-family: shuziFont;
        font-size: 3.5rem;
        color: @titleColor;
      }
      .you-name{
        font-family: siyuanFont;
        font-size: 1.5rem;
        color: @mkColor;
      }
    }
  }
}
</style>